<template>
  <div class="main" id="orderForm">
    <IndentState :indentState="indentBatchVO.indentBatch[0].indentState" :fontSize="40"/>
    <div class="air-column">
      <el-descriptions :title="hotel.name" :column="4">
        <el-descriptions-item label="房间类型">{{ room_type.type }}</el-descriptions-item>
        <el-descriptions-item label="可住人数">{{ room_type.capacity }}人</el-descriptions-item>
        <el-descriptions-item label="床型">{{ room_type.bedType }}</el-descriptions-item>
        <el-descriptions-item label="早餐">
          <el-tag size="small">{{ hasBreakfast(room_type.breakfast) }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
      </el-descriptions>
    </div>

    <div class="air-column">
      <el-descriptions :title="'预订信息'" :column="4">
        <el-descriptions-item label="入住时间"><el-date-picker
            class="input-with-select"
            v-model="indentBatchVO.indentBatch[0].checkInTime"
            type="datetime"
            placeholder="选择日期时间"
            disabled="true"
        >
        </el-date-picker>
        </el-descriptions-item>

        <el-descriptions-item label="退房时间">
          <el-date-picker
              class="input-with-select"
              v-model="indentBatchVO.indentBatch[0].checkOutTime"
              type="datetime"
              placeholder="选择日期时间"
              disabled="true"
          >
          </el-date-picker>
        </el-descriptions-item>

        <el-descriptions-item label="房间数量"><el-input-number
            class="input-with-select"
            v-model="indentBatchVO.indentBatch.length"
            @change="handleChange"
            :min="1"
            :max="10"
            disabled="true"
        ></el-input-number>

        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div v-if="indentBatchVO.indentBatch[0].indentState == 'CREATED'">
      <el-col >
        <el-row
            type="flex"
            justify="space-between"
            align="middle"
            class="info-bar"
        >
          <span>应付总额：</span>
          <span class="price">￥ {{ 0 }}</span>
        </el-row>
        <el-button type="warning" class="submit" @click="handleSubmit"
        >去支付</el-button
        >
      </el-col>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
import IndentState from "./IndentState.vue";

const hotel = ref({
  name: "HOTELNAME",
})
const room_type = ref({
  type: "VIPROOM",
  bedType: "BIGBED",
  capacity: 2,
  breakfast: 1,
})
const indentBatchVO=ref({
  indentBatch:[{
    indentState:"CREATED",
    checkInTime:new Date(),
    checkOutTime:new Date(),

  }],
  totalAmount:0,
})
const hasBreakfast =(b: Number) => {
  return "含早餐"
}
const checkInTime=ref({})
const checkOut=ref({})
const roomNum=ref(0)
const customerName=ref("")
const customerPhone=ref("")

const timeFormat = (mystime)=>{
  var addstime = mystime.getFullYear() +'-'  + fullNum(Number(mystime.getMonth()) + 1)+ '-'
      + fullNum(mystime.getDate())+ ' '+ fullNum(mystime.getHours())+ ":"
      + fullNum(mystime.getMinutes()) + ":" +fullNum(mystime.getSeconds());
  return addstime;

}
const fullNum=(obj)=>{
  if(Number(obj)<10){
    return '0'+obj;
  }else{
    return obj;
  }

}
</script>

<style>
.air-column {
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px #ddd dashed;
}
h2 {
  margin-bottom: 20px;
  font-size: 22px;
  font-weight: normal;
}

.info-bar {
  border-top: 1px #ddd dashed;
  padding: 10px 15px;
  font-size: 14px;
  color: #666;
}
.price {
  font-size: 28px;
  color: orange;
}
.submit {
  margin: 50px auto;
  display: block;
  width: 250px;
  height: 50px;
}



</style>
